<template>
  <div>
    <h2>----------HelloActions组件的内容----------</h2>
   <button @click="asyncUpdataMessage('康师傅')">异步更新信息</button>
   <button @click="actionsUpdataMessage">通过Actions更新信息</button>
   <button @click="actionsUpdataAge('111')">通过Actions更新age</button>
   <br><br>
   <button @click="succeedUpdata">提醒用户成功修改</button>
   <button @click="succeedUpdataMessage">传参并提醒用户成功修改</button>
   <button @click="succeedUpdataMessage_good('100米')">优雅的传参且提醒用户成功修改</button>

   <h3>{{$store.state.info}}</h3>
  </div>
</template>

<script>
import * as type from '../store/mutations-types'

export default {
  name:'HelloActions',
  methods:{
    asyncUpdataMessage(name){
      this.$store.commit({
        type: type.ASYNCUPDATAmESSAGE,
        name,
      });
    },
    actionsUpdataMessage(){
      // dispatch 发送到 Actions
      this.$store.dispatch('actionsUpdataInfo');
    },
    actionsUpdataAge(age){
      this.$store.dispatch({
        type:'actionsUpdataAge',
        age,
      });
    },
    succeedUpdata(){
      this.$store.dispatch('succeedUpdata', ()=>{
        console.log('里面已经完成修改了');
      })
    },
    succeedUpdataMessage(){
      // 这样传参并提醒修改成功也可以，但不够优雅
      this.$store.dispatch('succeedUpdataMessage', {
        message: { height:'10米' },
        success: () => {
          console.log('里面已经完成修改了');
        },
      })
    },
    succeedUpdataMessage_good(height){
      // dispatch相当于做了一层中转，相当于返回的Promise对象
      this.$store
        .dispatch({
          type:'succeedUpdataMessage_good',
          height,
        }).then(res=>{
          console.log(res);
          })
    },
  },
}
</script>

<style>

</style>